<template>
    <div class="sidebar">
        <!--展开折叠开关-->
        <div class="menu-toggle" @click="collapseChage">
            <i class="el-icon-caret-left" v-show="!collapse" title="收起"></i>
            <i class="el-icon-caret-right" v-show="collapse" title="展开"></i>
        </div>
        <el-menu class="sidebar-el-menu" :collapse="collapse" :default-active="onRoutes" background-color="#324157"
                 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <label v-for="item in items">
                <el-menu-item class="item1-slider1" :index=item.path v-if="!item.children" v-show="item.menuShow"
                              @click="getMenuId(item.id)">
                    <i class="el-icon-share" style="width: 15px;"></i>
                    <span slot="title">{{ item.name}}</span>
                </el-menu-item>
                <el-submenu class="item1-slider2" :index=item.path v-else v-show="item.menuShow">
                    <template slot="title">
                        <i class="el-icon-share" style="width: 15px;"></i>
                        <span slot="title">{{ item.name}}</span>
                    </template>
                    <label v-for="(item1,index1) in item.children" :key="index1">
                        <el-menu-item class="item2-slider1" :index=item1.path v-if="!item1.children"
                                      v-show="item1.menuShow" @click="getMenuId(item1.id)">
                            <span slot="title">{{ item1.name}}</span>
                        </el-menu-item>
                        <el-submenu class="item2-slider2" :index=item1.path v-else v-show="item1.menuShow">
                            <template slot="title">
                                <span slot="title">{{ item1.name}}</span>
                            </template>
                            <label v-for="(item2,index2) in item1.children" :key="index2">
                                <el-menu-item class="item3-slider1" :index=item2.path v-if="!item2.children"
                                              v-show="item2.menuShow" @click="getMenuId(item2.id)">
                                    <span slot="title">{{ item2.name}}</span>
                                </el-menu-item>
                                <el-submenu class="item3-slider2" :index=item2.path v-else v-show="item2.menuShow">
                                    <template slot="title">
                                        <span slot="title">{{ item2.name}}</span>
                                    </template>
                                    <label v-for="(item3,index3) in item2.children" :key="index3">
                                        <el-menu-item class="item4-slider1" :index=item3.path v-if="!item3.children"
                                                      v-show="item3.menuShow" @click="getMenuId(item3.id)">
                                            <span slot="title">{{ item3.name}}</span>
                                        </el-menu-item>
                                        <el-submenu class="item4-slider2" :index=item3.path v-else
                                                    v-show="item3.menuShow">
                                            <template slot="title">
                                                <span slot="title">{{ item3.name}}</span>
                                            </template>
                                            <label v-for="(item4,index4) in item3.children" :key="index4">
                                                <el-menu-item class="item5-slider1" :index=item4.path
                                                              v-show="item4.menuShow" @click="getMenuId(item4.id)">
                                                    <span slot="title">{{ item4.name}}</span>
                                                </el-menu-item>
                                            </label>
                                        </el-submenu>
                                    </label>
                                </el-submenu>
                            </label>
                        </el-submenu>
                    </label>
                </el-submenu>
            </label>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';

    export default {
        data() {
            let menus = JSON.parse(localStorage.getItem('menus'));
            menus.unshift({
                path: '/dashboard',
                menuShow: true,
                name: '系统首页',
                children: null,
                id: 1
            });

            // console.log(JSON.stringify(  menus[4] ))
            console.log(menus)


            return {
                collapse: false,
                items: menus
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/', '');
            }
        },
        methods: {
            collapseChage() {
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            getMenuId(id) {
                sessionStorage.setItem('menuId', id);
                console.log(id);
            }

        },
        created() {
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        }
    }
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        background: #324157;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
        overflow-y: scroll;
    }

    .sidebar > ul::-webkit-scrollbar {
        width: 0;
    }

    .sidebar .menu-toggle {
        background: #4A5064;
        text-align: center;
        color: white;
        height: 26px;
        line-height: 30px;
    }


</style>
